<template>
  <div class="schoolgirl">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <router-link to="/switch"
            ><img to="/switch" src="../assets/image/18695.png"
          /></router-link>
        </div>
        <div class="h-title">熊猫看书</div>
        <div class="h-right">
          <router-link to="/personal">书架</router-link>

          <router-link to="/search" class="h-search"></router-link>
        </div>
      </header>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li>
            <router-link to="/home">首页</router-link>
          </li>
          <li>
            <router-link to="/leader">排行</router-link>
          </li>
          <li>
            <router-link to="/classify">分类</router-link>
          </li>
          <li>
            <router-link to="/schoolboy">男生</router-link>
          </li>
          <li class="active">
            <router-link to="/schoolgirl">女生</router-link>
          </li>
        </ul>
      </nav>
      <!-- 精彩推荐 -->
      <div class="box">
        <div class="all-title">精彩推荐</div>
        <bothsexes></bothsexes>
      </div>
      <!-- 完本佳作 -->
      <div class="box2" style="margin-top: 10px">
        <div class="all-title">完本佳作</div>
        <threefigures></threefigures>
      </div>
      <!-- 簪花堂 -->
      <div class="box3" style="margin-top: 10px">
        <div class="all-title">簪花堂</div>
        <moregender></moregender>
      </div>
      <!-- 穿越时空 -->
      <div class="box4" style="margin-top: 10px">
        <div class="all-title">穿越时空</div>
        <moregender></moregender>
      </div>
      <!-- 排行榜 -->
      <div id="ranking" style="margin-top: 10px">
        <div class="ranking-nr">
          <div class="all-title">热销榜</div>
          <!-- 排行顺序 -->
          <bestselling></bestselling>
        </div>
        <router-link to="/leader">
          <div class="more-title">更多热销排行<i></i></div>
        </router-link>
      </div>

      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>
import bothsexes from "../components/BothSexes.vue";
import moregender from "../components/MoreGender.vue";
import threefigures from "../components/ThreeFigures.vue";
import bestselling from "../components/BestSelling.vue";
import footermodule from "../components/FooterModule.vue";

export default {
  data() {
    return {};
  },
  components: {
    bothsexes,
    footermodule,
    threefigures,
    moregender,
    bestselling,
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  padding-bottom: 0;
}
</style>